<template>
    <div>
        <el-table :data="list" height="600" style="width: 100%">
            <el-table-column prop="id" label="ID" width="180" />
            <el-table-column prop="name" label="房屋名称" width="180" />
            <el-table-column prop="title" label="描述" />
            <el-table-column prop="person" label="经纪人" width="180" />
            <el-table-column prop="state" label="是否出售">
                <template #default="{ row }">
                    {{ row.state == '1' ? '未出售' : '已出售' }}
                </template>
            </el-table-column>
            <el-table-column prop="level" label="装修" width="180" />
            <el-table-column prop="sizeRoom" label="房间" />
            <el-table-column prop="url" label="图片" width="180">
                <template #default="{ row }">
                    <el-image style="width: 100px; height: 100px" :src="row.url" :zoom-rate="1.2" :max-scale="7"
                        :min-scale="0.2" :preview-src-list="[row.url]" :initial-index="4" fit="cover" />
                </template>
            </el-table-column>
            <el-table-column prop="操作" >
                <template #default="{ row }">
                    <el-button type="primary" link>待审核</el-button>
                    <el-button type="success" link>审核已通过</el-button>
                    <el-button type="danger" link>审核不通过</el-button>
                </template>
            </el-table-column>
            
        </el-table>
        <el-pagination background layout="prev, pager, next" :total="total" v-model:current-page="pageCode" />
    </div>
</template>

<script setup>
import api from '@/api/api'

import { ref,watch } from 'vue';

const list = ref([])
const total=ref(0)
const pageSize=ref(10)
const pageCode=ref(1)
const getData = () => {
    api.get('/room/list',{
        params:{
            pageSize:pageSize.value,
            pageCode:pageCode.value
        }
    }).then(res => {
        if (res.status === 200 && res.data.code === 10000) {
            list.value = res.data.data.list
            total.value=res.data.data.total
        }
    })
}
getData()
watch(pageCode,()=>{
    getData()
})
</script>

<style lang="scss" scoped></style>